<!--
 * @Author: your name
 * @Date: 2020-05-11 19:27:58
 * @LastEditTime: 2020-06-09 17:46:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \v-nw-h5\src\pages\store\components\GoodsMsg.vue
-->
<template>
    <div class="goods-msg">
        <p class="goods-title" v-if="goodsMsg.title">
            <span @click="goDetail(goodsMsg.itemId)">{{goodsMsg.title}}</span>
            <span class="goods-detail-btn" @click="goDetail(goodsMsg.itemId)">
                详情
                <span class="iconfont icon-arrows_up1"></span>
            </span>
        </p>
        <div class="displayFlex justifyCtBwt price-warp">
            <span class="goods-price" @click="goDetail(goodsMsg.itemId)">
                <span>
                    ￥{{goodsMsg.price}}
                </span>
            </span>
        </div>
        <span class="goods-buy-btn" @click="goDetail(goodsMsg.itemId)">
            立即购买
        </span>
    </div>
</template>

<script>
    export default {
        name: "GoodsMsg",
        props: {
            goodsMsgProp: Object
        },
        data() {
            return {
                goodsMsg: {
                    storeId: "", //店铺id
                    title: "",
                    currency: "￥",
                    price: 0,
                    itemId: 0, //商品的id
                    userCartItemNum: 1, //用户购物车商品数量
                    add2Cart: true, //商品是否已经加入购物车
                    belongSwiperIndex: 0
                }
            };
        },
        mounted() {
            this.goodsMsg = Object.assign({}, this.goodsMsg, this.goodsMsgProp);
        },
        methods: {
            goDetail(itemId) {
                this.$emit("showGoodsDetail", itemId);
            }
        },
        watch: {
            newModuleProp(val) {
                this.goodsMsg = Object.assign({}, this.goodsMsg, val);
            }
        }
    };
</script>

<style scoped lang="scss">
    .goods-msg {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        padding: 0.16rem 0.24rem;
        width: 100%;
        display: flex;
    }

    .goods-title {
        text-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.4);
        font-size: 0.14rem;
        color: #fff;
        padding-bottom: 0.05rem;
    }

    .price-warp {
        width: 100%;
    }

    .goods-price {
        font-size: 0.16rem;
        color: #fff;
        text-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.4);
    }

    .goods-buy-btn {
        display: inline-block;
        padding: 0 0.1rem;
        background-color: #f25757;
        border-radius: 0.25rem;
        line-height: 0.25rem;
        height: 0.25rem;
        color: #fff;
        position: absolute;
        bottom: 0.2rem;
        right: 0.2rem;
        // .icon-arrows_up1 {
        //     position: relative;
        //     top: 0.01rem;
        //     font-size: 0.16rem;
        //     font-weight: 800;
        // }
    }

    .goods-detail-btn {
        box-sizing: border-box;
        display: inline-block;
        padding: 0 0.05rem;
        background-color: rgba(0, 0, 0, 0.2);
        -webkit-border-radius: 0.25rem;
        -moz-border-radius: 0.25rem;
        border-radius: 0.25rem;
        color: #fff;
        font-size: 0.11rem;
        height: 0.2rem;
        line-height: 0.2rem;
        text-align: center;
        /* line-height: .12rem; */
        .icon-arrows_up1 {
            position: relative;
            top: 0.01rem;
            font-size: 0.11rem;
            font-weight: 900;
        }
    }
</style>